<style scoped lang="less"></style>
<template>
  <div class="record-detail">
    <h1 class="title">{{ data.name }}</h1>
    <el-row class="infos" :gutter="20">
      <el-col :span="8" v-for="(item, index) in details" :key="index">{{
        item
      }}</el-col>
    </el-row>
    <div class="opers flex between text-center">
      <div class="oper-item" @click="analysisAction">报表分析</div>
      <div class="oper-item" @click="planeAction">
        <p>
          消防平面图<br /><span class="fs-14"
            >({{ detail.firefightingplanNum }})</span
          >
        </p>
      </div>
      <div class="oper-item" @click="planAction">
        <p>
          消防预案<br /><span class="fs-14"
            >({{ detail.firepreventionplanNum }})</span
          >
        </p>
      </div>
      <div class="oper-item" @click="ruleAction">
        <p>
          规章制度<br /><span class="fs-14"
            >({{ detail.rulesandregulationsNum }})</span
          >
        </p>
      </div>
      <div class="oper-item" @click="trainAction">
        <p>
          消防培训<br /><span class="fs-14"
            >({{ detail.firetrainingNum }})</span
          >
        </p>
      </div>
      <div class="oper-item" @click="docAction">
        <p>
          合法性文件<br /><span class="fs-14"
            >({{ detail.legaldocumentsNum }})</span
          >
        </p>
      </div>
      <div class="oper-item" @click="pictureAction">
        <p>
          现场记录<br /><span class="fs-14">({{ detail.pictureNum }})</span>
        </p>
      </div>
    </div>
    <div class="mt-20 flex between">
      <iot-blk class="record-safe" title="安全巡检">
        <el-row :gutter="20">
          <el-col :span="12"
            ><el-button type="dblue" @click="importantModalVisible = true"
              >重点部位({{ detail.checkaddrNum }})</el-button
            ></el-col
          >
          <el-col :span="12"
            ><el-button type="dblue" @click="inspectPlanModalVisible = true"
              >巡检计划({{ detail.planNum }})</el-button
            ></el-col
          >
          <el-col :span="12"
            ><el-button type="dblue" @click="fireStationModalVisible = true"
              >微型消防站</el-button
            ></el-col
          >
          <el-col :span="12"
            ><el-button type="dblue" @click="showTraceDanger('danger')"
              >企业自检</el-button
            ></el-col
          >
          <el-col v-if="data.cameraType == 1" :span="12"
            ><el-button type="dblue" @click="showTraceDanger('trace')"
              >消防检查</el-button
            ></el-col
          >
          <el-col :span="24" v-else
            ><el-button type="dblue" @click="showTraceDanger('trace')"
              >消防检查</el-button
            ></el-col
          >
          <el-col :span="12" v-if="data.cameraType == 1"
            ><el-button type="dblue" @click="monitorAction(data)"
              >{{ detail.cameraType }}鹰眼e通</el-button
            ></el-col
          >
        </el-row>
      </iot-blk>
      <iot-blk class="record-assess" title="单位评估">
        <div id="assessChart" class="assess-chart" style="height: 80px"></div>
        <div class="flex text-center mt-10">
          <div class="flex-1">
            <p>{{ evaluation.score || "--" }}</p>
            <p>评估成绩</p>
          </div>
          <div class="flex-1">
            <p>{{ evaluation.grade || "--" }}</p>
            <p>等级</p>
          </div>
          <div class="flex-1">
            <p>{{ evaluationTime || "--" }}</p>
            <p>评估时间</p>
          </div>
        </div>
        <el-button
          class="mt-10"
          :loading="evaluating"
          type="dblue"
          @click="getBusinessEvaluation"
          >重新评估</el-button
        >
      </iot-blk>
      <iot-blk class="record-safe" title="物联网设备">
        <el-row :gutter="20">
          <el-col :span="12" v-for="(item, index) in iotList" :key="index"
            ><el-button type="dblue" @click="open(item)">{{
              item.name
            }}</el-button></el-col
          >
        </el-row>
      </iot-blk>
    </div>
    <!-- 消防平面图 start -->
    <el-dialog
      v-if="planeModalVisible"
      :visible.sync="planeModalVisible"
      :title="'消防平面图(' + data.name + ')'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
      fullscreen
    >
      <Plane
        ref="plane"
        :id="data.id"
        :mainH="winSize.winH - 90"
        @cancel="planeModalVisible = false"
      >
      </Plane>
    </el-dialog>
    <!-- 消防平面图 end -->
    <!-- 消防预案 start -->
    <el-dialog
      v-if="planModalVisible"
      :title="'消防预案(' + data.name + ')'"
      :visible.sync="planModalVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <Plan ref="plan" :id="data.id" @cancel="planModalVisible = false"> </Plan>
    </el-dialog>
    <!-- 消防预案 end -->
    <!-- 规章制度 start -->
    <el-dialog
      v-if="ruleModalVisible"
      :title="'规章制度(' + data.name + ')'"
      :visible.sync="ruleModalVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <Rule ref="rule" :id="data.id" @cancel="ruleModalVisible = false"> </Rule>
    </el-dialog>
    <!-- 规章制度 end -->
    <!-- 消防培训 start -->
    <el-dialog
      v-if="trainModalVisible"
      :title="'消防培训(' + data.name + ')'"
      :visible.sync="trainModalVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <Train ref="train" :id="data.id" @cancel="trainModalVisible = false">
      </Train>
    </el-dialog>
    <!-- 消防培训 end -->
    <!-- 合法性文件 start -->
    <el-dialog
      v-if="docModalVisible"
      :title="'合法性文件(' + data.name + ')'"
      :visible.sync="docModalVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <Doc ref="doc" :id="data.id" @cancel="docModalVisible = false"> </Doc>
    </el-dialog>
    <!-- 合法性文件 end -->
    <!-- 图片 start -->
    <el-dialog
      v-if="pictureModalVisible"
      :title="'现场记录(' + data.name + ')'"
      :visible.sync="pictureModalVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <Picture
        ref="important"
        :id="data.id"
        @cancel="pictureModalVisible = false"
      >
      </Picture>
    </el-dialog>
    <!-- 图片 end -->
    <!-- 重点部位 start -->
    <el-dialog
      v-if="importantModalVisible"
      :title="'巡检点(' + data.name + ')'"
      :visible.sync="importantModalVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <Important
        ref="important"
        :id="data.id"
        @cancel="importantModalVisible = false"
      >
      </Important>
    </el-dialog>
    <!-- 重点部位 end -->
    <!-- 巡检计划 start -->
    <el-dialog
      v-if="inspectPlanModalVisible"
      :title="'巡检计划(' + data.name + ')'"
      :visible.sync="inspectPlanModalVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
    </el-dialog>
    <!-- 巡检计划 end -->
    <!-- 检查痕迹&消防隐患 start -->
    <el-dialog
      v-if="traceDangerModalVisible"
      :title="'检查痕迹&消防隐患(' + data.name + ')'"
      :visible.sync="traceDangerModalVisible"
      width="1000px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
    </el-dialog>
    <!-- 检查痕迹&消防隐患 end -->
    <!-- 微型消防站 start -->
    <el-dialog
      v-if="fireStationModalVisible"
      :title="'微型消防站(' + data.name + ')'"
      :visible.sync="fireStationModalVisible"
      width="1000px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <FireStation
        ref="fireStation"
        :id="data.id"
        @cancel="fireStationModalVisible = false"
      >
      </FireStation>
    </el-dialog>
    <!-- 微型消防站 end -->
    <!-- 评估详情 start -->
    <el-dialog
      v-if="evaluateModalVisible"
      title="风险评估指数情况"
      :visible.sync="evaluateModalVisible"
      width="1000px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <div
        class="evaluate-blk"
        v-for="(item, index) in evaluateDetail"
        :key="index"
      >
        <div class="hd">{{ item.title }}</div>
        <div class="con">{{ item.remark }}</div>
        <div class="ft">
          <el-row :gutter="20">
            <el-col :span="3">{{ item.fanallyScore }}</el-col>
            <el-col :span="21">{{ item.reason }}</el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
    <!-- 评估详情 end -->
    <!-- 报表分析 start -->
    <el-dialog
      v-if="analysisModalVisible"
      title="报表分析"
      :visible.sync="analysisModalVisible"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <el-form :inline="true" class="filter-blk flex-1">
        <el-form-item class="ml-20" label="报表月份">
          <el-date-picker
            v-model="analysisMonth"
            :picker-options="analysisMonthOptions"
            type="month"
            placeholder="选择月份"
            format="yyyy-MM"
            value-format="yyyy-MM"
          >
          </el-date-picker>
        </el-form-item>
        <el-button type="blue" @click="downloadAnalysis">下载报表</el-button>
      </el-form>
    </el-dialog>
    <!-- 报表分析 end -->

    <!-- 检查记录 start -->
    <el-dialog
      v-if="checkModalVisible"
      title="检查记录"
      :visible.sync="checkModalVisible"
      width="1000px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <el-table :data="checkData" style="width: 100%">
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column prop="name" label="任务名称" align="center">
        </el-table-column>
        <el-table-column prop="state" label="任务状态" align="center">
          <template slot-scope="scope">
            {{ status.get(scope.row.state) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.state != 2">
              <el-button  @click="getFileList(scope.row.id, 2)"
                >复查单</el-button
              >
              <el-button  @click="getFileList(scope.row.id, 1)"
                >告知书</el-button
              >
              <el-button
                v-if="scope.row.state != 1"
                @click="getDetail(scope.row.id)"
                >详情</el-button
              >
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 检查记录 end -->

    <!-- 文件列表 start -->
    <el-dialog
      v-if="fileModalVisible"
      title="文件列表"
      :visible.sync="fileModalVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <el-table :data="checkFileList" style="width: 100%">
        <el-table-column label="序号" align="center" type="index">
        </el-table-column>
        <el-table-column prop="name" label="文件名称" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="openFile(scope.row.file)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 文件列表 end -->

    <!-- 详情内容列表 start -->
    <el-dialog
      v-if="detailModalVisible"
      title="检查详情"
      :visible.sync="detailModalVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <el-table :data="detailList" style="width: 100%">
        <el-table-column label="序号" align="center" type="index">
        </el-table-column>
        <el-table-column prop="checkContent" label="整改内容" align="center">
        </el-table-column>
        <el-table-column prop="name" label="是否存在问题" align="center">
          <template slot-scope="scope">
            {{ scope.row.state == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 详情内容列表 end -->
  </div>
</template>
<script>
import { mapState } from "vuex";
import HighCharts from "highcharts";
import Plane from "@/components/census/record/DetailPlane.vue";
import Plan from "@/components/census/record/DetailPlan.vue";
import Rule from "@/components/census/record/DetailRule.vue";
import Train from "@/components/census/record/DetailTrain.vue";
import Doc from "@/components/census/record/DetailDoc.vue";
import Picture from "@/components/census/record/DetailPicture";
import Important from "@/components/census/record/Important.vue";
import FireStation from "@/components/census/record/FireStation.vue";
export default {
  name: "recordDetail",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    Plane,
    Plan,
    Rule,
    Train,
    Doc,
    Important,
    FireStation,
    Picture,
  },
  computed: {
    ...mapState(["siteInfos", "winSize"]),
    evaluationTime() {
      if (this.evaluation.time) {
        let time = this.evaluation.time.split(" ");
        return time[0];
      }
    },
  },
  watch: {},
  data() {
    return {
      loading: false,
      chartData: null,
      detail: {},
      details: [],
      analysisModalVisible: false,
      analysisMonth: "",
      analysisMonthOptions: {
        disabledDate(time) {
          let today = new Date();
          let year = today.getFullYear();
          let month = today.getMonth();
          let firstDay = new Date(year + "/" + month + "/11 00:00:00");
          return time.getTime() > firstDay.getTime();
        },
      },
      planeModalVisible: false,
      planModalVisible: false,
      ruleModalVisible: false,
      trainModalVisible: false,
      docModalVisible: false,
      importantModalVisible: false,
      inspectPlanModalVisible: false,
      traceDangerModalVisible: false,
      pictureModalVisible: false,
      traceDangerType: "trace",
      fireStationModalVisible: false,
      iotList: [
        {
          name: "电气火灾监测",
          query: {
            type: "fire",
          },
        },
        {
          name: "消防用水监测",
          query: { type: "pool" },
        },
        {
          name: "独立烟感预警",
          query: { type: "smoke" },
        },
        {
          name: "可燃气体预警",
          query: { type: "gas" },
        },
        {
          name: "消防可视化监测",
          query: { type: "monitor" },
        },
        {
          name: "自动联网报警",
          query: { type: "auto" },
        },
      ],
      evaluation: {},
      evaluating: false,
      evaluateDetail: [],
      evaluateModalVisible: false,
      checkModalVisible: false,
      checkData: [],
      status: new Map([
        [1, "检查结束"],
        [2, "待检查"],
        [3, "正在检查"],
        [4, "待复查"],
        [5, "待二次复查"],
      ]),
      checkFileList: [],
      fileModalVisible: false,
      detailList: [],
      detailModalVisible: false,
    };
  },
  methods: {
    getDetail(taskId) {
      this.detailModalVisible = true;
      this.$get("/check/fireCheck/checkContentList", {
        taskId,
      }).then(
        (res) => {
          this.detailList = res.data;
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    openFile(url) {
      window.open(url);
    },
    getFileList(taskId, type) {
      this.fileModalVisible = true;
      this.$get("/check/fireCheck/checkFileList", {
        taskId,
        type,
      }).then(
        (res) => {
          this.checkFileList = res.data;
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    getCheckData() {
      this.$get("/check/fireCheck/getCheckTaskList", {
        businessId: this.data.id,
      }).then(
        (res) => {
          this.checkData = res.data;
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    monitorAction(item) {
      this.$router.push(`/monitor?id=${item.id}&name=${item.name}`);
    },
    getData() {
      this.$get("/business/businessDetail/statistics", {
        id: this.data.id,
      }).then(
        (res) => {
          this.detail = res.data;
          this.details = res.data.businessDetail.split(";");
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    showTraceDanger(type) {
      this.traceDangerType = type;
      if (type == "danger") {
        this.traceDangerModalVisible = true;
        return;
      }
      this.checkModalVisible = true;
      this.getCheckData();
    },
    renderChart() {
      let that = this;
      let width = 250;
      let height = 80;
      let data = this.chartData;
      let options = {
        credits: {
          enabled: false,
        },
        colors: ["#338dea", "#33c0ee"],
        chart: {
          width: width,
          height: height,
          type: "pie",
          backgroundColor: "transparent",
          spacing: 0,
          margin: [5, 10, 10, 10],
        },
        title: {
          text: "",
        },
        plotOptions: {
          pie: {
            // innerSize: '60%',
            dataLabels: {
              enabled: true,
              allowOverlap: true, // 允许数据标签重叠
              color: "#AFECFF",
              borderWidth: 0,
              style: {
                fontSize: 12 + "px",
              },
              distance: 20,
              format: "{point.name}",
            },
            borderWidth: 0,
            showInLegend: true,
            events: {
              click: function (e) {
                that.showEvaluateDetail();
              },
            },
          },
        },
        series: [
          {
            name: "单位评估",
            data: data,
          },
        ],
        legend: {
          enabled: false,
        },
        tooltip: {
          // formatter: function () {
          // 	return '<b>' + this.point.name + '</b>: ' + this.point.y + '%'
          // }
        },
      };
      HighCharts.chart("assessChart", options);
    },

    open(item) {
      let routeUrl = this.$router.resolve({
        path: "/unitIOT",
        query: Object.assign(
          {
            id: this.data.id,
            name: this.data.name,
          },
          item.query
        ),
      });
      if (item.query.type == "auto") return;
      window.open(routeUrl.href, "_blank");
    },
    analysisAction() {
      this.analysisModalVisible = true;
    },
    downloadAnalysis() {
      if (!this.analysisMonth) {
        this.$message.error("请选择报表月份");
        return;
      }
      window.open(
        `${this.config.baseApi}/fireFightingIOT/report/getReport?businessId=${this.data.id}&date=${this.analysisMonth}&accountname=${this.siteInfos.accountname}`
      );
    },
    planeAction() {
      if (this.siteInfos.userType == 1) {
        this.planeModalVisible = true;
      } else {
        this.$router.push("/archivePlat");
      }
    },
    planAction() {
      if (this.siteInfos.userType == 1) {
        this.planModalVisible = true;
      } else {
        this.$router.push("/archivePlan");
      }
    },
    ruleAction() {
      if (this.siteInfos.userType == 1) {
        this.ruleModalVisible = true;
      } else {
        this.$router.push("/archiveRule");
      }
    },
    trainAction() {
      if (this.siteInfos.userType == 1) {
        this.trainModalVisible = true;
      } else {
        this.$router.push("/archiveTrain");
      }
    },
    docAction() {
      if (this.siteInfos.userType == 1) {
        this.docModalVisible = true;
      } else {
        this.$router.push("/archiveDocument");
      }
    },
    pictureAction() {
      if (this.siteInfos.userType == 1) {
        this.pictureModalVisible = true;
      } else {
        this.$router.push("/picture");
      }
    },
    getBusinessEvaluation() {
      this.evaluating = true;
      this.$get("/business/businessEvaluation/getBusinessEvaluation", {
        businessId: this.data.id,
      }).then(
        (res) => {
          this.evaluating = false;
          this.evaluation = res.data;
          this.evaluateDetail = res.data.list;
          this.chartData = [
            ["扣分", res.data.subtractScore],
            ["分数", res.data.score],
          ];
          this.renderChart();
        },
        (err) => {
          this.evaluating = false;
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    showEvaluateDetail() {
      this.evaluateModalVisible = true;
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    this.getBusinessEvaluation();
  },
};
</script>
